<!-- systemSet -->
<template>
  <div class="Leaderboard content_box">
    <div class="header_row flex align-center flex-wrap" v-if="hasBtn('bord:query')">
      <div class="flex align-center m-r-2">
        <span>管家名称：</span>
        <el-input v-model="searchObj.UserName" placeholder="请输入内容" clearable></el-input>
      </div>
      <div class="flex align-center m-r-2">
        <span>管家手机号：</span>
        <el-input v-model="searchObj.UserPhone" placeholder="请输入内容" clearable></el-input>
      </div>
      <div class="flex align-center m-r-2">
        <span>管家推荐码：</span>
        <el-input v-model="searchObj.InCode" placeholder="请输入内容" clearable></el-input>
      </div>
      <div class="flex align-center m-r-2">
        <span>榜单名称：</span>
        <el-input v-model="searchObj.RankName" placeholder="请输入内容" clearable></el-input>
      </div>

      <div class="flex align-center m-r-2">
        <span class="tit_span nowarp">类型：</span>
        <el-select v-model="searchObj.TypeName" placeholder="请选择">
          <el-option v-for="item in typeOptions" :key="item.Skey" :label="item.Svalue" :value="item.Skey">
          </el-option>
        </el-select>
      </div>
      <div class="flex align-center m-r-2">
        <span>活动时间：</span>
        <el-date-picker v-model="searchObj.timeValue" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" clearable>
        </el-date-picker>
      </div>
      <el-button type="primary" @click="(searchObj.currentPage = 1), getListFun()" v-if="hasBtn('leaderboardreport:query')">查询</el-button>
    </div>

    <div class="m-b-1 neck_box flex align-center space-between">
      <div>
        <!-- <el-button type="danger">批量删除</el-button> -->
        <el-button v-if="hasBtn('leaderboardreport:export')" type="warning" disabled>导出列表</el-button>
      </div>
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchObj.currentPage" :max-height="tableHeight" :page-size="searchObj.pageSize" :page-sizes="[10, 20, 50, 100, 200]" layout="total,sizes, prev, pager, next, jumper" :total="pageTotal">
      </el-pagination>
    </div>
    <el-table class="m-b-1" :data="tableData" border stripe style="width: 100%" v-loading="tableLoading" sortable="custom" @sort-change="sortChange">
      <el-table-column prop="index" label="序号" align="center" fixed>
      </el-table-column>
      <el-table-column label="榜单名称" prop="RankName" align="center" sortable>
      </el-table-column>
      <el-table-column label="名次" align="center" sortable>
        <template slot-scope="scope">{{scope.row.Ranking + '名'}}</template>
      </el-table-column>

      <el-table-column prop="UserName" label="管家名称" align="center" sortable>
      </el-table-column>
      <el-table-column prop="UserPhone" label="管家手机号" align="center" sortable>
      </el-table-column>
      <el-table-column prop="InCode" label="管家推荐码" align="center" sortable>
      </el-table-column>
      <el-table-column width="200" :label="TypeName" align="center" sortable>
        <template slot-scope="scope">
          <div v-if="scope.row.TypeName == 'Sell'">{{scope.row.Qty + '元'}}</div>
          <div v-else-if="scope.row.TypeName == 'Pull'">{{scope.row.Qty + '个'}}</div>
          <div v-else-if="scope.row.TypeName == 'Promotion'">{{scope.row.Qty + '个'}}</div>
        </template>
      </el-table-column>
      <el-table-column v-if="this.TypeName == '销售榜'" label="完成额" align="center" sortable>
        <template slot-scope="scope">{{scope.row.Finish + '元'}}</template>
      </el-table-column>
      <el-table-column label="奖励金额" align="center" sortable>
        <template slot-scope="scope">{{scope.row.AwardMoney + '元'}}</template>
      </el-table-column>
      <el-table-column width="150" prop="StandardTime" label="上榜时间" align="center" sortable>
      </el-table-column>
      <el-table-column label="榜单类型" align="center" sortable>
        <template slot-scope="scope">{{scope.row.TypeName|translate}}</template>
      </el-table-column>
      <el-table-column label="上榜条件" align="center" sortable>
        <template slot-scope="scope">
          <div v-if="scope.row.TypeName == 'Sell'">销售:{{scope.row.Target + '元'}}</div>
          <div v-else-if="scope.row.TypeName == 'Pull'">激活:{{scope.row.Target + '个'}}</div>
          <div v-else-if="scope.row.TypeName == 'Promotion'">推广:{{scope.row.Target + '个'}}</div>
        </template>
      </el-table-column>

      <!-- <el-table-column label="第一名" width="140" align="center" sortable>
        <template slot-scope="scope">{{scope.row.RewardPlaces + '元'}}</template>
      </el-table-column>
      <el-table-column label="第二名" width="140" align="center" sortable>
        <template slot-scope="scope">{{scope.row.RewardPlaces + '元'}}</template>
      </el-table-column>
      <el-table-column label="第三名" width="140" align="center" sortable>
        <template slot-scope="scope">{{scope.row.RewardPlaces + '元'}}</template>
      </el-table-column>
      <el-table-column label="剩余名次" align="center" sortable>
        <template slot-scope="scope">{{scope.row.DecreaseRatio + '元'}}</template>
      </el-table-column> -->
      <el-table-column prop="StartTime" label="活动开始时间" width="180" align="center" sortable>
      </el-table-column>
      <el-table-column prop="EndTime" label="活动结束时间" width="180" align="center" sortable>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

  import { getList } from '@/api/Leaderboard/RankedView'
  import { getCodeMasterList } from '@/api/system/dictionary'
  export default {
    //import引入的组件需要注入到对象中才能使用
    name: 'leaderboardreport',
    components: {},
    data() {
      //这里存放数据
      return {
        TypeName: '',
        dialogVisible: false,
        tableHeight: 0,
        searchObj: {
          UserName: "", //用户名称
          UserPhone: "", //管家手机号码
          InCode: "", //推荐码
          RankName: "", //榜单名称
          TypeName: "Sell", //类型
          currentPage: 1,
          pageSize: 10,
          timeValue: ''
        },
        SModuleOption: [],
        tableData: [
          { isActive: true }
        ],
        pageTotal: 0,
        tableLoading: false,
        typeOptions: [],
      };
    },
    //监听属性 类似于data概念
    computed: {
    },
    //监控data中的数据变化
    watch: {},
    filters: {
      translate(val) {
        if (val == 'week') {
          val = '自然周'
        }
        if (val == 'Year') {
          val = '自然年'
        }
        if (val == 'Month') {
          val = '自然月'
        }
        if (val == 'Quarter') {
          val = '季度'
        }
        if (val == 'Pull') {
          val = '激活榜'
        }
        if (val == 'Promotion') {
          val = '推广榜'
        }
        if (val == 'Sell') {
          val = '销售榜'
        }
        return val
      }
    },
    //方法集合
    methods: {
      handleSizeChange(val) {
        this.searchObj.pageSize = val
        this.getListFun()
      },
      handleCurrentChange(val) {
        this.searchObj.currentPage = val
        this.getListFun()
      },
      sortChange(e) {
        let SortType = false
        if (e.order == "ascending") {
          SortType = true
        }
        this.getListFun(e.prop, SortType)
      },
      getListFun(SortName = 'CreateDate', SortType = true) {
        if (this.searchObj.TypeName == 'Sell') {
          this.TypeName = '销售榜'
        }
        if (this.searchObj.TypeName == 'Promotion') {
          this.TypeName = '推广榜'
        }
        if (this.searchObj.TypeName == 'Pull') {
          this.TypeName = '激活榜'
        }

        let currentPage = this.searchObj.currentPage
        this.tableLoading = true
        let searchObj = this.$deepClone(this.searchObj)
        let obj = {
          "IsApp": false,
          "UserName": searchObj.UserName, //用户名称
          "UserPhone": searchObj.UserPhone, //管家手机号码
          "InCode": searchObj.InCode, //推荐码
          "RankName": searchObj.RankName, //榜单名称
          "TypeName": searchObj.TypeName, //类型
          "IsPaging": true, //是否分页
          "SortName": SortName, //排序栏位
          "SortType": SortType,//排序类型｛True：正序；Flase：反序｝
          'PageIndex': currentPage,
          "PageSize": searchObj.pageSize,
        }
        searchObj.timeValue && (obj['StartTime'] = searchObj.timeValue[0])//开始时间
        searchObj.timeValue && (obj['EndTime'] = searchObj.timeValue[1])//结束时间
        delete searchObj.timeValue
        getList(obj).then(res => {
          console.log(res.Data)
          if (!res.Data) {
            this.tableData = []
            this.pageTotal = 0
            this.tableLoading = false
            return
          }
          this.tableData = res.Data.map((item, index) => {
            for (let cell in item) {
              if (!item[cell] && this.$getType(item[cell]) !== 'Number') {
                item[cell] = '-'
              }
            }
            return { ...item, index: (index + 1) + ((currentPage - 1) * 10) }
          })
          this.pageTotal = res.Total
          this.tableLoading = false
        }).catch(_ => {
          this.tableLoading = false
          this.tableData = []
          this.pageTotal = 0
        })
      },

      //获取下拉数据
      getCodeMasterListFun() {
        let list = [
          { 'SModule': 'Leaderboard', 'SFunction': 'cycle' },
          { 'SModule': 'Leaderboard', 'SFunction': 'type' },
        ]
        list.forEach(item => {
          let obj = {
            "SModule": item.SModule,
            "SFunction": item.SFunction,
            "IsPaging": false, //是否分页
          }
          getCodeMasterList(obj).then(res => {
            console.log(res.Data)
            if (item.SFunction == 'cycle') {
              this.cycleOptions = res.Data
            } else {
              this.typeOptions = res.Data
            }
          })
        })

      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      this.getCodeMasterListFun()
      this.getListFun()

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>
//@import url(); 引入公共css类
<style  scoped>
  .Leaderboard .tit_span {
    width: 60px;
  }
</style>